<template>
<div>
     <van-nav-bar
  title="预约"
/>
    <div v-if="flag" class="content">
        <div class="main">
            <img src="../assets/aboutme.png" alt="">
            <div class="list">
                <ul>
                    <li>
                        <p>姓名</p>
                        <input v-model="nickname" type="text">
                    </li>
                    <li>
                        <p>手机</p>
                        <input v-model="phone" type="text">
                    </li>
                    <li>
                        <p>时间（提前2-3天预约）</p>
                            <el-date-picker
                                v-model="time"
                                type="datetime"
                                placeholder="选择日期时间">
                            </el-date-picker>
                    </li>
                    <li>
                        <p>地址</p>
                        <div class="city">
                             <el-cascader
                                size="large"
                                :options="options"
                                v-model="address"
                                @change="addressChange">
                            </el-cascader>
                        </div>
                         
                        <input type="text" v-model="place" placeholder="请输入详细地址">
                    </li>
                    <button @click="order">提交</button>
                </ul>
            </div>
            
        </div>
    </div>
    <div class="free" v-else>
        <p>你还没有购买服务</p>
        <button @click="see('http://tg.jht018.com')">去免费体验</button>
    </div>


  <tabbar></tabbar>  
 </div>
</template>

<script>
import tabbar from "../components/tabbar"
import api from "../axios/api.js";
import { regionData,CodeToText  } from 'element-china-area-data'
export default {
    

    data() {
            return {
                ID:"",
                options: regionData,
                selectedOptions: [],
                place:"",
                address:null,
                phone:"", 
                time:"",
                nickname:"",
                arr:null,
                flag:false,
            }
        },
        mounted(){
         let ID = localStorage.getItem("ID")
          this.ID = ID
          if(localStorage.getItem("id")){
            this.ID = localStorage.getItem("id")
         }
          this.getuser()
        },
    methods:{
       addressChange(arr) {
        this.arr = arr
 
      },
      see(e) {

                 window.location.href = e
            },
        order(){
         this.time =    this.$moment(this.time).format("YYYY-DD-MM HH:mm:ss")
          this.address =  CodeToText[this.arr[0]]+"-"+ CodeToText[this.arr[1]]+"-"+ CodeToText[this.arr[2]]
            let data = {
                id: this.ID,
                time: this.time,
                phone:this.phone,
                place:this.place,
                address:this.address,
                nickname:this.nickname,
                };

            this.$post(api.upAppoint,data).then(
              res => {
            if (res.code == 200) {
                this.$toast.success(res.msg);          
                  }else{
              this.$toast.fail(res.msg);
            }
          });
          },
        getuser(){
          this.$post(api.userInfo,{id:this.ID}).then(
              res => {
            if (res.code == 200) {
                    if(res.data.state == "2") {
                        this.flag = true
                    }    
                  }else{
              this.$toast.fail(res.msg);
            }
          });
          }
          
    },
        components:{
            tabbar
        }
}
</script>

<style lang="less" scoped>
.free {
    text-align: center;
    margin-top: 200px;
    p{
        font-size: 15px;
    }
    button{
        border: none;
        width: 80%;
        height: 40px;
        background-color: #59a6ec;
        color: #fff;
        border-radius: 20px;
        margin-top: 100px;
    }
}
.van-nav-bar {
    background-color: #fff;
    .van-nav-bar__title{
        color: #000;
        float: left;
        margin-left: 11px;
        font-size: 18px;
        font-weight: 600;
    }
}
.space {
  padding-top: 10px;
  background-color: #fff;
}
.space1 {
  height: 80px;
  background-color: #fff;
}
.content {
    background-color: #fff;
    .main {
        width: 95%;
        margin: 0 auto;
        >a {
            display: block;
            width: 300px;
            height: 130px;
            margin: 0 auto;
            margin-top: 30px;
            background: url("../assets/yuyue1.png") no-repeat;
            background-size: 100%;

        }
        img {
            width: 100%;
            height: 200px;
            border-radius: 10px;
            box-shadow: 2px 2px 6px #ccc;
        }
       
      .list{
          width: 80%;
          margin: 0 auto;
          margin-top: 20px;
          height: 350px;
          box-shadow: 2px 2px 6px #ccc;
          border-radius: 10px;
            ul{
                width: 80%;
                margin: 0 auto;
                padding-top: 10px;
                li{
                    p{
                        font-size: 13px;
                        margin: 5px 5px;
                    }
                    input{
                            background-color: #f3f3f3;
                            border: none;
                            width: 100%;
                            height: 26px;
                            margin-top: 8px;
                            border-radius: 20px;
                            font-size: 13px;
                            text-indent: 1em;
                    }
                }
                button{
                    border: none;
                    background-color: #59a6ec;
                    width: 100%;
                    border-radius: 25px;
                    height: 26px;
                    color: #fff;
                    font-weight: 600;
                    margin-top: 10px;
                    margin-bottom: 100px;
                }
            }
      }  
    }
}

.el-cascader{
    width: 100%;
    /deep/ input{
    background-color: #f3f3f3;
    color: #000;
    height: 28px;
    border: none;
    border-radius: 20px;
}
}

.el-date-editor{
    /deep/ input{
    background-color: #f3f3f3;
    color: #000;
    height: 28px;
    line-height: 28px;
    border: none;
    border-radius: 20px;
}
    /deep/ i{
        line-height: 28px;
    }

}

</style>